<template>
  <div class="box">
    <h3>
      全民砍价
      <i class="iconfont icon-bottom"></i>
    </h3>
    <div v-for="(item, index) in lists" :key="index" class="items">
      <div><img :src="item.pic" alt="" /></div>
      <div class="right">
        <div class="top">
          <p>{{ item.name }}</p>
          <p>{{ item.characteristic }}</p>
        </div>
        <div>
          <p class="sell">123123</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getKanjia } from "../utils/api/index"

  export default {
    name: "kanjia",
    data() {
      return {
        lists: [],
      }
    },
    created() {
      getKanjia().then((res) => {
        // console.log(res.data.goodsMap)
        let arr = Object.values(res.data.goodsMap)
        this.lists = arr.slice(-2)
      })
    },
  }
</script>

<style lang="scss" scoped>
  .box {
    border-bottom: 0.2rem solid #f5f5f5;
    border-top: 0.2rem solid #f5f5f5;
    h3 {
      text-align: center;
      font-size: 0.32rem;
      height: 0.8rem;
      line-height: 0.8rem;
      border-bottom: 0.01rem solid #e9e9e9;
    }
    .items {
      display: flex;
      padding: 0.2rem;
      border-bottom: 0.01rem solid #e9e9e9;
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          p:first-child {
            font-size: 0.28rem;
            margin-bottom: 0.34rem;
          }
          p:nth-child(2) {
            font-size: 0.24rem;
            color: #858585;
          }
        }
        .sell {
          font-size: 0.28rem;
        }
      }
      img {
        width: 2.28rem;
        height: 2.28rem;
        margin-right: 0.1rem;
        border-radius: 0.1rem;
        display: block;
      }
    }
  }
</style>
